<template>
  <div>
    <OptionTitle title="订场购票" />
    <el-form label-width="100" class="mt20">
      <el-form-item label="显示内容：" class="mb5">
        <el-checkbox-group v-model="showContent" @change="venueChange">
          <el-checkbox v-for="item in paramList" :key="item.key" :label="item.key">{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="显示方式：" class="mb5">
        <el-radio v-for="item in styleList" :key="item.key" v-model="content.style" :label="item.key" @change="venueChange">{{ item.value }}</el-radio>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import OptionTitle from '../../../components/optionTitle.vue'
export default {
  components: {
    OptionTitle
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      content: {},
      paramList: [],
      styleList: [],

      showContent: [],

      contentTemp: {},
      // venueContentTemp: {},
      showContentTemp: []
    }
  },
  created() {
    this.paramList = [...this.config.paramList]
    this.styleList = [...this.config.styleList]
    this.content = { ...this.config.content }
    if (this.content.param) {
      // this.showContentTemp = JSON.parse(JSON.stringify(this.content.param.split(',')))
      this.showContent = this.content.param.split(',')
    }
  },
  methods: {
    venueChange() {
      const { content, contentTemp, showContent, showContentTemp } = this
      let count = 0
      if (showContent.join(',') !== showContentTemp.join(',')) {
        count++
      }
      if (content.style !== contentTemp.style) {
        count++
      }

      this.content.param = this.showContent.join(',')
      this.$bus.$emit('miniVenuebookChange', this.content)
    }

  }
}
</script>

<style>
</style>
